<template>
	<div id="shopcar">
		<v-header>
			<price-header ref="priceHeader"></price-header>
		</v-header>

		<v-content>
			<div class="title">
				<div class="select width-1200">
					<span class="color-red">购物车</span>
					<div v-if="tableData.length>0">
						<el-checkbox v-model="isCheckedAll" @change="hanldeCheck()">全选/取消</el-checkbox>
					</div>
				</div>
				<div class="width-1200">
					<el-table :data="[1]" style="width: 100%">
						<el-table-column prop="date" label="产品名称"></el-table-column>
						<el-table-column prop="name" label="单价" width="200"></el-table-column>
						<el-table-column prop="address" label="数量" width="200"></el-table-column>
						<el-table-column prop="date" label="库存" width="100"></el-table-column>
						<el-table-column prop="name" label="总金额" width="200"></el-table-column>
						<el-table-column prop="address" label="操作" width="100"></el-table-column>
					</el-table>
				</div>
			</div>
			<div class="title-place"></div>
			<!--表格-->
			<div class="tables width-1200">
				<template v-for="(item,index) in tableData">
					<div class="title">
						<el-checkbox v-model="item.checked" @change="hanldeCheck(index)">{{item.userName}}</el-checkbox>
					</div>
					<div class="one-table">
						<el-table :data="item.list" style="width: 100%">
							<el-table-column prop="date">
								<template slot-scope="scope">
									<el-checkbox @change="hanldeCheck(1,1)" v-model="scope.row.checked">{{scope.row.product.name}}</el-checkbox>
								</template>
							</el-table-column>
							<el-table-column prop="name" width="200">
								<template slot-scope="scope">
									<span>{{scope.row.product.priceCN}}</span>
								</template>
							</el-table-column>
							<el-table-column prop="address" width="200">
								<template slot-scope="scope">
									<!--{{scope.row.qty}}-->
									<count :obj_='scope.row' :min='scope.row.product.minBuyQty' :max="scope.row.product.qty - scope.row.product.lockQty" key_="qty" :hascondition='1' @change="countChange"></count>
									<!--<v-counter :obj_='scope.row' :min='scope.row.product.minBuyQty' key_="qty" :hascondition='1' @change="countChange"></v-counter>-->
								</template>
							</el-table-column>
							<el-table-column  width="100">
								<template slot-scope="scope">
									<span v-if="scope.row.product">{{scope.row.product.qty - scope.row.product.lockQty}}{{scope.row.product.unitIdCN}}</span>
								</template>
							</el-table-column>
							<el-table-column prop="name" width="200">
								<template slot-scope="scope">
									<span class="color-red">{{scope.row.product.priceCN}}*{{scope.row.qty}}</span>
								</template>
							</el-table-column>
							<el-table-column prop="name" width="100">
								<template slot-scope="scope">
									<span class="hover" @click="handleDel(scope.row.id)">删除</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</template>
				<v-empty v-if="tableData.length==0"></v-empty>
			</div>
		</v-content>
		<v-footer v-if="tableData.length>0">
			<div class="total">
				<div class="width-1200 my-flex-between">
					<div>
						<el-checkbox v-model="isCheckedAll" @change="hanldeCheck()">全选/取消</el-checkbox>
					</div>
					<div class="right my-flex-right">
						<!--<span class="freight">预估运费：¥</span>-->
						<span class="price color-red">合计：¥{{totalMoney}}</span>
						<li class="gopay my-btn" @click="goPay">去下单</li>
					</div>
				</div>

			</div>
			<div class="total-place"></div>
		</v-footer>
	</div>
</template>

<script>
	import service from '@/js/services/shopcar';
	import count from './count.vue';
	export default {
		name: 'shopcar',
		inject:['hasPermission'],
		components:{count},
		data() {
			return {
				isCheckedAll: false,
				tableData: [],
				totalMoney: 0
			}
		},
		mounted() {
			this.getShopCars();
		},
		methods: {
			...service,
			async goPay() {
				let userInfo = this.$store.state.userInfo;				
				if(userInfo && userInfo.id && userInfo.type == 0) {
					this.$confirm('您还没有权限,请升级为企业买家，去升级吗?', '提示', {
						confirmButtonText: '去升级',
						cancelButtonText: '再想想',
						type: 'warning'
					}).then(() => {
						this.$router.push('/update');
					}).catch(() => {});
					return;
				}
				
				
				await this.hasPermission(1);
				let ids = '';
				let arr = []
				for(let item of this.tableData) {
					let temp_ids = item.list.filter(x => x.checked == true).map(x => x.id).join(',');
					if(temp_ids) {
						ids += "," + temp_ids;
					}
					for(let p of item.list) {
						if(p.checked == true) {
							arr.push({
								productId: p.product.id,
								qty: p.qty
							})
						}
					}
				}

				if(!ids) {
					this.$message('请选择要购买的商品！');
					return false;
				}

				var checkParam = {};
				checkParam.list = arr;

				let res_ = await this.httptool.post(this.apis.checkQty, checkParam);
				console.log(res_)

				let address = await this.httptool.post(this.apis.getDefaultAddress, null);

				this.$store.commit('changeValue', {
					name: 'confrimorder',
					value: {
						ids: ids.substr(1),
						address: address.data
					}
				});
				if(!(address.data && address.data.id)) {
					this.$confirm('您还没有收货地址，赶紧去添加吧？').then(() => {
						this.$router.push('/address?type=order');
					});

				} else {
					this.$router.push('/orderconfirm');
				}
				//				this.httptool.ajaxPost(this.apis.checkQty, checkParam, function(res) {
				//					this.httptool.ajaxPost(this.apis.getDefaultAddress, {}, res => {
				//						this.$store.commit('changeValue', {
				//							name: 'confrimorder',
				//							value: {
				//								ids: ids.substr(1),
				//								address: res.data
				//							}
				//						});
				//						if(!res.data) {
				//							this.$confirm('您还没有收货地址，赶紧去添加吧？').then(() => {
				//								this.$router.push('/addaddress?type=order');
				//							});
				//						} else {
				//							this.$router.push('/orderconfirm');
				//						}
				//					});
				//				});

			},
			hanldeCheck(shopindex, proindex) {
				this.$nextTick(() => {
					/*1，全选时只有第一个参数
					 *2，选择店铺时只有1，2两个参数
					*/
					//debugger
					if(shopindex == undefined) { //全选
						this.tableData = this.tableData.map(item => {
							item.checked = this.isCheckedAll;
							item.list = item.list.map(item_ => {
								item_.checked = this.isCheckedAll;
								return item_;
							})
							return item;
						})
					} else if(shopindex != undefined && !proindex) {
						let shopitem = this.tableData[shopindex];
						shopitem.list = shopitem.list.map(item_ => {
							item_.checked = shopitem.checked;
							return item_;
						})
						this.tableData.splice(shopindex, 1, shopitem);
					}
					this.checkAll();
					this.setTotalMoney();
				})
			},
			async countChange() {
//				let self = this;
//				let currentQty = qty;
//				let params = {};
//				params.id = item.id;
//				params.qty = currentQty;
//
////				let res = await this.httptool.post(this.apis.shopCareEditQty, params);
//				var shop = this.tableData.filter((p) => {
//					return p.traffickerId == item.traffickerId;
//				});
//				var pro = shop[0].list.filter((p) => {
//					return p.id == item.id;
//				});
//				pro[0].qty = currentQty;
				this.setTotalMoney();

			},
			checkAll() {
				this.tableData = this.tableData.map(item => {
					let checked = true;
					for(let item_ of item.list) {
						if(!item_.checked) {
							checked = false;
							break;
						}
					}
					item.checked = checked;
					return item;
				})
				this.isCheckedAll = this.tableData.filter(x => x.checked == false).length == 0;
			},
			handleDel(id) {
				this.$confirm('确认删除该商品？')
					.then(_ => {
						this.shopcarDel(id)
					})
					.catch(_ => {});
			}
		}
	}
</script>

<style lang="less" src="../../less/page/shopcar/index.less"></style>